import { List, WhiteSpace, Button, WingBlank, Toast } from 'antd-mobile';
import { Component } from 'react'
import { connect } from 'dva'
import moment from 'moment'
import router from 'umi/router';
import StandardForm from '@/components/standardForm'
@connect(({ manager, loading }) => {
  return {
    manager,
  }
})
class AddSettlement extends Component {
  constructor(props) {
    super(props)
    this.addSettlement = this.addSettlement.bind(this)
  }
  instantForm = null
  formItems = [
    {
      type: 'DatePicker',
      name: 'date',
      label: '日期',
      layoutOption: {
        mode: 'date',
      },
      placeholder: moment().format('YYYY-MM-DD'),
      options: {
        rules: [{required: true}],
        initialValue: new Date(Date.now())
      }
    },
    {
      name: 'money',
      label: '金额',
      layoutOption: {
        extra: '元',
        type: 'money'
      },
      placeholder: '请输入金额',
      options: {
        rules: [{required: true}]
      }
    },
    {
      type: 'TextareaItem',
      name: 'remark',
      label: '备注',
      layoutOption: {
        rows: 5
      },
      placeholder: '请输入备注',
    }
  ]
  addSettlement() {
    const { dispatch } = this.props
    this.instantForm.validateFields((err, values) => {
      if(err) return
      values.date = moment(values.date).valueOf()
      values.money = +values.money
      dispatch({
        type: 'manager/addSettlement',
        payload: values
      }).then(res => {
        Toast.success(res.msg)
        setTimeout(() => {
          router.go(-1)
        }, 1500)
      })
    })
  }
  render() {
    return (
      <WingBlank>
        <WhiteSpace />
        <List>
          <StandardForm 
            wrappedComponentRef={el => this.instantForm = el}
            formItems={this.formItems}
          />
        </List>
        <Button 
          style={{margin: '15px 0'}}
          type="primary"
          onClick={this.addSettlement}
        >提交</Button>
      </WingBlank>
    )
  }
}
export default AddSettlement